<template>
    <div class="father">
        <p>父组件</p>
        <p @click="test(6,7,$event)">汽车{{ Car }}</p>
        <p v-if="toy">父组件：子的玩具{{ toy }}</p>
        <PageDome47 :car="Car" :sendToy = "getToy" @send-toy="saveToy"></PageDome47>
    </div>
</template>
<script setup lang="ts" name = "Page47">
import { ref, unref, reactive, toRaw,toValue} from 'vue';
import PageDome47 from './page/PageDome47.vue';

let Car= ref('奔驰')
let toy= ref('');
/*
console.log('--------------')
console.log(unref(Car));
console.log('--------------')
console.log(Car);
*/
const reactiveState = reactive({ foo: 1, bar: 2 });
const rawState = toRaw(reactiveState); 
console.log(reactiveState)
console.log(rawState); // 输出原始对象：{ foo: 1, bar: 2 }
/*
const myRef = ref(10);
const normalizedValue = toValue(myRef); // 返回10
console.log(myRef)
console.log(normalizedValue)
// 如果是getter函数
const getter = () => 20;
const valueFromGetter = toValue(getter); // 返回2
console.log(getter)
console.log(valueFromGetter)
*/
function getToy(value){
    console.log("父"+value)
    toy.value = value
}
function saveToy(value:string){
    console.log(value)
    toy.value = value
}
   
function test(a:number,b:number,event){
    console.log(a,b)
    console.log(event)
}
function xyz(value:number){
    console.log('xyz',value)
}

</script>

<style lang="scss" scoped>

</style>